{include file="public/head"/}
    <div class="container-fluid"  id="main">
        <div class="row clearfix" id="search-box" style="margin-top:0">
            <div class="col-md-12 column text-right">
                <div class="form-inline" style="text-align: right;">
                    <div class="form-group">
                        <input type="text" class="form-control" id="name" placeholder="{:lang("enter_product_name,_code_or_model")}">
                      </div>
                      <div class="form-group">
                          <button type="button" class="btn btn-default" @click="requestSearch()"><span class="glyphicon glyphicon-search"></span> {:lang('search')}</button>
                      </div>
                </div>
            </div>
        </div>
      <div class="row clearfix">
        <div class="col-md-12 column">
          <div class="alert alert-dismissable alert-info">
            <button type="button" class="close">×</button>
             <p></p>
            </div>
        </div>
       </div>
      <div class="ntDesktop">
      <div class="ntDesktop-head">{:lang("product_list")}</div>    
              <div class="row clearfix" style="padding-top:12px">
        <div class="col-md-6 column">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab" id="list-all" @click="listStatusFun(9)">{:lang('all')}</a>
                </li>
                <li>
                    <a href="#home" data-toggle="tab" id="list-normal" @click="listStatusFun(1)">{:lang('normal')}</a>
                </li>
                <li>
                    <a href="#home" data-toggle="tab" id="list-pulloff" @click="listStatusFun(4)">{:lang("off_the_shelf")}</a>
                </li>
                <li>
                    <a href="#home" data-toggle="tab" id="list-del" @click="listStatusFun(2)">{:lang('delete')}</a>
                </li>
            </ul>
        </div>
        <div class="col-md-6 column text-right">
            <div>
                <a href="{:url('product/productAdd')}" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> {:lang("add_products")}</a>
                <span style="padding:10px">&nbsp;</span>
                <!-- <button type="button" class="btn btn-default" ><span class="glyphicon glyphicon-list-alt"></span> {:lang('batch_adjustment')}</button> -->
                <button type="button" class="btn btn-default option-pulloff" @click="batchfun(4,'update','batchObtained')" v-if="listStatus !=4 && listStatus !=2"><span class="glyphicon glyphicon-minus-sign"></span> {:lang("delisted_in_bulk")}</button>
                <button type="button" class="btn btn-default option-del" @click="batchfun(2,'update','batchDel')" v-if="listStatus !=4 && listStatus !=2"><span class="glyphicon glyphicon-remove-circle"></span> {:lang('batch_delete')}</button>
                <button type="button" class="btn btn-default option-recover" @click="batchfun(1,'update','batchRestore')" v-if="listStatus !=1"><span class="glyphicon glyphicon-ok-circle"></span> {:lang('batch_recovery')}</button>
                <button type="button" class="btn btn-danger option-clear" @click="batchfun(5,'deletes','batchClear')" v-if="listStatus ==2"><span class="glyphicon glyphicon-fire"></span> {:lang('batch_clear')}</button>
            </div>
        </div>
    
      </div>
       
      <div class="row clearfix">
        <div class="col-md-12 column">
          <input type="hidden" ref="waner" value="{:lang("please_select_product")}">
          <table class="table table-striped table-hover ntTable">
            <thead>
            <tr>
                <th style="text-align: center;"><input type="checkbox" @click="allsel" /> </th>
                <th>&nbsp;  </th>
                <th> {:lang('serial_number')} / {:lang("brand")} / {:lang('name')} </th>
                <th> {:lang("the_role_of_product")} </th>
                <th> 是否可售 </th>
                <th> {:lang('status')} </th>
                <th> {:lang('edit')} </th>
                <th style="text-align: center;"> {:lang('operate')} </th>
                </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in datalist" v-cloak>
                <td style="text-align: center;"><input type="checkbox"  @click="onesel(item.id)" /></td>
                <td> <img :src="item.img_url" border="0" width="50px" height="50px"></td>
                <td> <small>{{item.id}} / {{item.brand_name}}</small> <br />{{item.pro_name}} </td>
                <td>{{item.product_role_count}}</td>
                <td> {{item.is_sale}}</td>
                <td> {{item.status_name}}</td>
                <td>{{item.create_name}}<br /><small>{{item.create_at}}</small></td>
                <td  style="text-align: right;">
                    <div>

                      <a :href="'/admin/product/list_open?request=return&id='+item.id" class='btn btn-sm btn-primary' data-toggle="modal" data-target="#prosModal"><span class="glyphicon glyphicon-modal-window"></span> {:lang('summary')}</a>
                      <a :href="'/admin/product/productDetail?request=detail&id='+item.id" class='btn btn-sm btn-primary'><span class="glyphicon glyphicon-sunglasses"></span> {:lang('details')}</a>
                      <a :href="'/admin/product/productEdit?request=edit&id='+item.id" class='btn btn-sm btn-primary'><span class="glyphicon glyphicon-pencil"></span> {:lang('edit')}</a>
                      <!-- <a href="#" class='btn btn-sm btn-primary'><span class="glyphicon glyphicon-picture"></span> {:lang("image")}</a> -->
                      <a :href="'/admin/product/proCopy?request=return&id='+item.id" class='btn btn-sm btn-primary' data-toggle="modal" data-target="#prosCopy"><span class="fa fa-copy"></span> {:lang('copy')}</a>
                      <a href="javascript:;" class='btn btn-sm btn-default option-pulloff' v-show="item.status!='4'" @click="requestStatus(item.id,'update',4,'batchObtained')"><span class="glyphicon glyphicon-download"></span> {:lang("off_the_shelf")}</a>
                      <a href="javascript:;" class='btn btn-sm btn-default option-del' v-show="item.status!='2'" @click="requestStatus(item.id,'update',2,'batchDel')"><span class="glyphicon glyphicon-remove"></span> {:lang('delete')}</a>

                      <a href="javascript:;" class='btn btn-sm btn-default option-recover' v-show="item.status!='1'" @click="requestStatus(item.id,'update',1,'batchRestore')"><span class="glyphicon glyphicon-ok"></span> {:lang('recovery')}</a>
                      <a href="javascript:;" class='btn btn-sm btn-danger option-clear' v-show="item.status=='2'" @click="requestStatus(item.id,'deletes',9,'batchClear')"><span class="glyphicon glyphicon-fire"></span> {:lang('clear')}</a>
                      </div>
                </td>
              </tr>
              <tr style="text-align: center;" v-if="datalist.length==0">
                    <td colspan="8">{:lang('no_data')}</td>
                </tr>
            </tbody>
          </table>
          <ul class="pagination" id="pagination">
                </ul>
        </div>
          </div>
      </div>
    </div>
    <!--弹窗部分 开始-->    
<div class="modal fade" id="prosModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:1200px;">
        <div class="modal-content" style="width: 1200px;">
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div> 


<!--弹窗产品复制 -->
<div class="modal fade" id="prosCopy" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width: 1200px;" >
        <div class="modal-content" style="width: 1200px;">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script src="/static/Admin/js/prolist.js"></script>
{include file="public/foot"/}